//定义 函数, 创建XML解析器, 加载 XML 文件
function loadXML(xmlFile)
{
  
	  // alert(xmlFile);  //  1. 测试
	 //1. , 根据不同的浏览器 构建文档解析器,创建 XMLDOC
	  var xmlDoc=null;
	  
	//判断浏览器的类型

	try //Internet Explorer
	{
		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	}
	catch(e)
	{
	try //Firefox, Mozilla, Opera, etc.
	{
		 /* document.implementation.createDocument('','',null); 方法的三个参数说明
                 * 第一个参数是包含文档所使用的命名空间URI的字符串； 
                 * 第二个参数是包含文档根元素名称的字符串； 
                 * 第三个参数是要创建的文档类型（也称为doctype）
                 */
	xmlDoc=document.implementation.createDocument("","",null);
	}
	catch(e) {alert(e.message)}
	}



	 //2. 获得了 所构建的 XMLDOC 文档解析器  (或称:的 XML 解析器)
	if(xmlDoc!=null)
	{
		
		//xmlDoc=new ActiveXObject("Msxml2.DOMDocument");
		xmlDoc.async = false;
		xmlDoc.load(xmlFile);// 这里xmlFile,就是我传递的参数,注意这个是加载XML文件的方法，要想解析xml字符串则使用loadXML();
		
		//到这里,xmlDoc 就是一个在内存中加载XML文件内容的的文档树--  XML DOM
	}

	return xmlDoc;
}

   // 用javascript,解析  读取这个XML文件的内容,获取省份,城市
    function   showXML()
	{
		//firefox会忽略无参数的alert
		//window.alert("sss"); 
		//alert("show");
		
		//1. 加载XML
		 var myXmlDoc = loadXML("/Book_Store_Hbm/js/proMessage.xml");
		 //alert(myXmlDoc.xml);
		//2. 解析XML内容
		var  provinces=myXmlDoc.getElementsByTagName("province");  //根据xml的标签,获取一组元素
		//alert("省份："+provinces.length); //获取同名标签的 元素的 个数
		 // 如何逐个 获取 这个标签的 文本信息, 这里<province name="江苏省">,name是属性
		  for(var i=0;i<provinces.length;i++)
		  {
			   // 获取 name属性值
			   var p=provinces[i].getAttribute("name");
			   var code = provinces[i].getAttribute("code");
			     //alert(p);
				 //到此,再进行绑定
				  //  构建  Option对象
				  var op=new  Option(p,p);
				  //给下拉框 执行添加 选项, 使用javascript的 HTML DOM操作
				  document.getElementById("province").options.add(op);  
			  }
		
		
	}
	
	//创建 方法,更改省份,显示对应城市,实现级联
	var citys;
	function showCity()
	{
		
		 //alert("ok");
		//1. 首先获取当前 选择的是哪个省?
		     //  js---> html
			var  currentProvince= document.getElementById("province").value;
			//alert(currentProvince);
		
		
		 //下面是: js ---> XML     关于 js-->css ,回去自己总结,对比
		 
		//2. 根据这个省份,查询XML,返回对应的城市信息
		    //2.1. 加载XML
		 var myXmlDoc = loadXML("/Book_Store_Hbm/js/proMessage.xml");		
		  //2.2 解析XML内容
		var  provinces=myXmlDoc.getElementsByTagName("province"); 
		 //2.3 逐个判断比较
		for(var i=0;i<provinces.length;i++)
		  {
			   // 获取 name属性值
			   //alert("for");
			   //alert(provinces[i]);
			   var p=provinces[i].getAttribute("name");
			   if(p==currentProvince)
			   {
				   //alert("当前省份,在XML中的下标 顺序(从0开始):"+i);
				   
				    // 匹配 一致后,获取当前省份的 所有子元素,也就是所有的城市
					citys=provinces[i].childNodes;
					//alert(citys);
					//alert("所有的城市的个数:"+citys.length);
					//alert(citys.length);
					
					 // 循环迭代 城市列表
					 	document.getElementById("city").length=1;
					   for(var j=0;j<citys.length;j++)
					   {
						    //alert(citys[j].nodeType);
						     //逐个弹出 城市							
							 //alert(citys[j].childNodes[0].nodeValue);
							 
							// alert(provinces[i].childNodes[j].text); 等价上述
							
							// 把这个城市的 列表,绑定到 城市的下拉列表框
							if(citys[j].nodeType==3)
								continue;
							var city=citys[j].getAttribute("name");
							
							 document.getElementById("city").add(new Option(city,city));
							 // 留给大家 思考.......  
						}
				   break;   
				}		 
		 }
		//3. 得到城市信息,绑定到 城市的下拉框
		
	}
	function showArea()
	{
		//alert(citys);
		//1. 首先获取当前 选择的是哪个省?
		     //  js---> html
			var  currentCity= document.getElementById("city").value;
			//var  currentProvince= document.getElementById("province").value; 
			
			
			//alert(currentProvince);
		
		
		 //下面是: js ---> XML     关于 js-->css ,回去自己总结,对比
		 
		//2. 根据这个省份,查询XML,返回对应的城市信息
		    //2.1. 加载XML
		// var myXmlDoc = loadXML("省市县信息.xml");		
		  //2.2 解析XML内容
		//var provinces=myXmlDoc.getElementsByTagName("province"); 
		// var citys=showCity().childNodes;
		 //2.3 逐个判断比较
		for(var i=0;i<citys.length;i++)
		  {
			   // 获取 name属性值
			   //alert(citys[i]);
			   if(citys[i].nodeType==3)
				   continue;
			   var c=citys[i].getAttribute("name");
			   if(c==currentCity)
			   {
				   //alert("当前省份,在XML中的下标 顺序(从0开始):"+i);
				   
				    // 匹配 一致后,获取当前省份的 所有子元素,也就是所有的城市
					var areas=citys[i].childNodes;
					//alert("所有的城市的个数:"+citys.length);
					//alert(citys.length);
					
					 // 循环迭代 城市列表
					 	document.getElementById("area").length=1;
					   for(var j=0;j<areas.length;j++)
					   {
						    //alert(citys[j].nodeType);
						     //逐个弹出 城市							
							 //alert(citys[j].childNodes[0].nodeValue);
							 
							// alert(provinces[i].childNodes[j].text); 等价上述
							
							// 把这个城市的 列表,绑定到 城市的下拉列表框
							if(areas[j].nodeType==3)
								continue;
							var area=areas[j].getAttribute("name");
							
							 document.getElementById("area").add(new Option(area,area));
							 // 留给大家 思考.......  
						}
				   break;   
				}		 
		 }
		
		//3. 得到城市信息,绑定到 城市的下拉框
		
	}